<template>
  <div>
    <div class="page_title">审批管理</div>
    <el-tabs v-model="activeTab" class="demo-tabs" @tab-click="handleClick"
      style="background:white;border-radius: 5px;">
      <el-tab-pane label="申报审批" name="renzheng">
        <FormTable :name="table.name" :tableButton="table.button" :formRules="formRules" :tableData="table.tableData"
          :columns="table.columns" :total="total" :currentPage="queryParams.pageNum" :pageSize="queryParams.pageSize"
          @changeTableData="changeTableData" @queryTable="queryTable">
          <template #status="{ slotProps }">
              {{ getStatus(slotProps.activityId)  }}
          </template>
          <template #operator="{ slotProps }">
            <span class="table_button" @click="goToDetail(slotProps)">查看</span>
            <el-divider direction="vertical" />
            <span class="table_button" @click="handle(slotProps, 'pass')">通过</span>
            <el-divider direction="vertical" />
            <span class="table_button" @click="handle(slotProps, 'reject')">驳回</span>
          </template>
          <template #tableTabs>
            <el-tabs v-model="activeName" class="tabs" @tab-click="handleClick">
              <el-tab-pane label="区级初审" name="quji"></el-tab-pane>
              <el-tab-pane label="处级初审" name="chuji1"></el-tab-pane>
              <el-tab-pane label="处级复审" name="chuji2"></el-tab-pane>
              <el-tab-pane label="局审" name="ju"></el-tab-pane>
            </el-tabs>
          </template>
        </FormTable>
      </el-tab-pane>
      <el-tab-pane label="验收申报审批" name="yanshou"></el-tab-pane>
    </el-tabs>
  </div>
</template>
<script name="list-two" setup>
import FormTable from "@/components/FormTable/index.vue";
import { useRouter } from "vue-router";
import { queryRzsqList } from '@/api/rzsq'
import { ElMessage, ElMessageBox } from 'element-plus'

import { submitRzsq, addWorkFlow, updateApplicationById, getOpinion, getWorkFlow, saveCompleteWork, getFlowByActivityId } from '@/api/rzsq'
const router = useRouter();
const activeTab = ref('renzheng')
let total = ref(0);
let activeName = ref('quji')
let queryParams = reactive({ pageNum: 1, pageSize: 10, groups: [], rules: [], orderBys: [] })
onMounted(() => {
  getList()
})
function getList() {
  queryRzsqList(queryParams).then(res => {
    if (res.code == "0") {
      table.tableData = res.data.list
      total.value = res.data.total
    }
  })
}
function getStatus(id){
  if(activeName.value=='quji' && id < '002901'){
    return '已驳回'
  }
  if(activeName.value=='quji' && id == '002901'){
    return '待审批'
  }
  if(activeName.value=='quji' && id > '002901'){
    return '已通过'
  }
}
function queryTable(params) {
  let rules = []
  for (let key in params) {
    let val = params[key]
    val && rules.push(
      {
        field: key,
        data: val,
        opType: "Contains"
      }
    )
  }
  queryParams.rules = rules
  getList()
}
function changeTableData(pageNum, pageSize) {
  queryParams.pageNum = pageNum
  queryParams.pageSize = pageSize
  getList()
}
function handle(props, status) {
  let userInfo = JSON.parse(sessionStorage.getItem("userInfo"));
  let flowParams = { deptId: userInfo.deptId, deptName: userInfo.deptName, flowId: "00000029", flowVersion: "1.00", instName: "22", organId: userInfo.organId, organName: userInfo.organName, userId: userInfo.userId, userName: userInfo.userName }
  getOpinion({ flowUuid: props.flowUUid }).then(res => {
    getFlowByActivityId({ "rules": [{ "field": "activityId", "data": res.activityId, "opType": "Equals" }] }).then(res1 => {
      let operationList = res1.data.list
      let passOperationId = operationList.filter(item => item.operationName == '同意')
      if(passOperationId){
        passOperationId = passOperationId[0].operationId
      }
      let rejectOperationId = operationList.filter(item => item.operationName == '打回')
      if(rejectOperationId){
        rejectOperationId = passOperationId[0].operationId
      }
      flowParams.activityUuid = res.uuid
      flowParams.activityId = res.activityId
      flowParams.flowUuid = "a35c6e83-046a-4b46-8b33-2c5b7b4e9769"
      flowParams.operationId = status == 'pass' ? passOperationId : rejectOperationId
      flowParams.opIds = 1
      saveCompleteWork(flowParams).then(res2 => {
        if (res2.code == "0") {
          props.activityId = flowParams.activityId
          updateApplicationById(props)
          if (status == 'pass') {
            ElMessage({
              message: '已通过',
              type: 'success',
            })
          } else {
            ElMessage({
              message: '已驳回 ',
              type: 'success',
            })
          }
          getList()
        }
      })
    })
  })

}
const goToDetail = (prop) => {
  router.push({ path: "/rzsq/detail", query: { tab: 'shenqing', id: prop.id } });
}
const table = reactive({
  tableData: [],
  columns: [
    {
      label: "序号",
      type: "index",
      width: '70px'
    },
    {
      label: "申请单位",
      prop: "applicant",
    },
    {
      label: "申请日期",
      prop: "applicantDate",
    },
    {
      label: "申请单位名称",
      prop: "applicantName",
    },
    {
      label: "当前节点",
      prop: "email",
    },
    {
      label: "当前状态",
      prop: "status",
    },
    {
      label: "联系人",
      prop: "contact",
    },
    {
      label: "联系电话",
      prop: "contactNumber",
    },
    {
      prop: 'operator',
      label: "操作",
      field: "email",
      width: '160px'
    },
  ],
  totalRecordCount: 10,
  sortable: {},
});
const formRules = ref([
  {
    type: "input",
    field: "applicant",
    title: "申请单位",
    value: "",
  },
  {
    type: "datePicker",
    field: "applicantDate",
    title: "申请日期",
    value: "",
  },
  {
    type: "input",
    field: "applicantName",
    title: "申请单位名称",
    value: "",
  },
  {
    type: "input",
    field: "username",
    title: "当前节点",
    value: "",
  },
  {
    type: "input",
    field: "username",
    title: "当前状态",
    value: "",
  },
  {
    type: "input",
    field: "username",
    title: "联系人",
    value: "",
  },
  {
    type: "input",
    field: "username",
    title: "联系电话",
    value: "",
  },
]);
</script>
<style lang="scss" scoped>
::v-deep .el-tabs__item {
  padding-left: 12px !important;
}

::v-deep .el-tabs__header {
  margin: 0 !important
}
</style>
